<template>
    <view class="coupon-record">
        <view class="tabs">
            <view class="item" :class="{ active: index === currentTabIndex }" v-for="(item, index) in tabList" :key="index" @click="chooseTab(item, index)">{{ item.title }}</view>
        </view>
        <view class="tab-list">
            <view class="list" v-for="(item, index) in couponList" :key="index" v-if="index === currentTabIndex">
                <CouponItem :couponData="item2" v-for="(item2, index2) in item.list" :key="index2"></CouponItem>
                <NoData v-if="item.list.length <= 0"></NoData>
            </view>
        </view>
    </view>
</template>
<script>
import CouponItem from '@/components/CouponItem/index.vue';
import NoData from '@/components/NoData.vue';
import { getCouponList } from '@/api/coupon.js';
export default {
    name: 'couponRecord',
    data() {
        return {
            tabList: [
                {
                    title: '已使用'
                },
                {
                    title: '已过期'
                }
            ],
            currentTabIndex: 0,
            couponList: [
                {
                    list: []
                },
                {
                    list: []
                }
            ]
        };
    },
    computed: {},
    mounted() {},
    created() {
        this.getRecord(this.currentTabIndex);
    },
    methods: {
        chooseTab(item, index) {
            this.currentTabIndex = index;
            this.getRecord(this.currentTabIndex);
        },
        async getRecord(index) {
            if (this.couponList[index].list.length > 0) {
                return;
            }
            let state = index === 0 ? '1' : '2';
            let res = await getCouponList({
                state: state
            });
            if (res.RequestStatus == 100 && res.Data) {
                this.couponList[index].list = res.Data;
                this.couponList[index].list.forEach(item => {
                    item.unfold = false;
                    item.status = state;
                });
            }
        }
    },
    components: { CouponItem, NoData }
};
</script>
<style lang="scss" scoped="scoped">
.coupon-record {
    width: 100%;
    min-height: 100vh;
    background: #f6f8fc;
    display: flex;
    flex-direction: column;
    color: #262832;
    .tabs {
        display: flex;
        justify-content: space-around;
        background: #fff;
        .item {
            font-size: 32rpx;
            line-height: 32rpx;
            color: #262832;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 30rpx 0 20rpx;
            &::after {
                position: absolute;
                content: '';
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0);
                width: 0;
                height: 6rpx;
                background-color: #08c160;
                border-radius: 3rpx;
            }
        }
        .active {
            font-weight: bold;
            color: #08c160;
            &::after {
                width: 40rpx;
                transition: all 0.5s;
            }
        }
    }
    .tab-list {
        width: 100%;
        padding: 40rpx 40rpx 0;
        box-sizing: border-box;
        position: relative;
        .list {
            position: relative;
        }
    }
}
</style>
